<!-- 卖家详情 -->
<template>
<div class>
  <div class="fixeds">
    <image class="imgbg" v-if="type=='2'" :src="userInfo.headimgurl" resize="cover" />
    <image class="imgbg" v-if="type=='1'" src="root:img/officeBar.png" resize="cover" />

    <div class="imgMask">
      <div class="userInfo">
        <image class="userAvator" v-if="type=='2'" :src="userInfo.headimgurl" />
        <image class="userAvator" v-if="type=='1'" src="root:img/officeIcon.png" />
        <div class="userCenter">
          <div class="row acenter" v-if="type=='2'">
            <text class="userName">{{userInfo.nickname}}</text>
            <text class="credit">Excellent member</text>
          </div>
          <div class="row acenter" v-if="type=='1'">
            <text class="userName">GIV</text>
            <image class="officeIcon" src="root:img/office.png" />
            <text class="tagoffice">Platform</text>
          </div>
          <div class="row">
            <text class="row_title" v-if="userInfo.refund_address">{{userInfo.refund_address}}</text>
            <!-- <text class="row_num">50</text> -->
          </div>
        </div>
      </div>
    </div>

    <scroller class="scroller">
      <text class="mainTit">Selling</text> 
      <div class="recontent">
        <div class="reitem" v-for="(item,index) in secondList" :key="index">
          <image
            class="goodsImga"
            :src="item.thumb"
            @click="gonext('root:app/goods/goods2.js',{id:item.id})"
          />
          <div class="contentBox">
            <text class="goodsTitle2">{{item.title}}</text>
            <div class="priceInfo">
              <div class="leftInfo">
                <text class="symbol">AU$</text>
                <text class="money">{{item.price}}</text>
                <!-- <text class="reduce">80%</text> -->
                <!-- <text class="shopType">NEW</text> -->
              </div>
              <div class="leftInfo">
                <!-- <text class="iconfont shopIcon">&#xe64c;</text>
								<text class="iconfont shopIcon">&#xe634;</text>
                <text class="iconfont shopIcon">&#xe607;</text>-->
              </div>
            </div>
          </div>
        </div>
        <div class="reitemS"></div>
      </div>
    </scroller>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#303030"></floading>
    </div>
    <head bgcolor="transparent" titleColor="#FFF"></head>
  </div>
</div>
</template>

<script>
import { get_users_info, get_goods_list } from "../../mixin/ajax.js";
import asCore from "../../mixin/core";
export default {
  data() {
    return {
      type: "",
      page: 1,
      userId: "",
      userInfo: {
        id: 27,
        account: "",
        status: 1,
        phone_number: "",
        headimgurl: "",
        nickname: "",
        email: "",
        sex: 2,
        user_name: "",
        users_uuid: "",
        refund_name: "",
        refund_phone: "",
        refund_address: "",
        take_time: "",
        receive_time: "",
        take_address: ""
      },
      secondList: []
    };
  },
  methods: {
    onLoad(param) {
      let that = this;
      if (param && param.param) {
        return false;
      }
      if (param && param.type) {
        this.type = param.type;
      }
      if (param && param.id) {
        this.userId = param.id;
        this.getUserINfo();
        //获取用户信息
      }
      this.getList(param.type, param.id);
    },
    getUserINfo() {
      get_users_info(
        {
          users_id: this.userId
        },
        (res, flag) => {
         
          if (flag) {
            if (res.code == "200") {
              this.userInfo = res.data;
            } else {
              this.toast(res.message);
            }
          }
        }
      );
    },
    gonext(url, parmar) {
      this.push(url, parmar);
    },
    getList(type, id) {
      let that = this;
      //获取二手列表
      get_goods_list(
        {
          users_id: this.userId,
          type: type,
          status: "1",
          page: this.page,
          page_num: "10"
        },
        (res, flag) => {
          if (flag) {
           
            if (res.code == "200") {
              that.secondList = res.data.list;
            } else {
              that.toast(res.message);
            }
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-family: iconfont;
}

.wrapper {
  background-color: #f5f5f5;
  position: relative;
}

.mainTit {
  background-color: #ffffff;
  font-size: 32px;
  color: #1e1e1e;
  height: 109px;
  line-height: 109px;
  padding-left: 32px;
}

.recontent {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 686px;
  margin-left: 32px;
}

.reitem {
  height: 516px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  /* justify-content: space-between; */
}

.reitemS {
  width: 336px;
}

.goodsImga {
  width: 336px;
  height: 336px;
}

.contentBox {
  width: 336px;
  padding: 0 20px;
}

.goodsTitle {
  font-size: 20px;
  height: 56px;
  line-height: 28px;
  margin-top: 12px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2; 
}

.goodsTitle2 {
  font-size: 26px;
  height: 74px;
  line-height: 37px;
  margin-top: 16px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2; 
}

.priceInfo {
  margin-top: 20px;
  flex-direction: row;
  justify-content: space-between;
}

.leftInfo {
  flex-direction: row;
  align-items: flex-end;
}

.symbol {
  color: red;
  margin-bottom: 5px;
  margin-right: 5px;
}

.money {
  color: red;
  font-size: 32px;
  font-weight: bold;
  margin-right: 5px;
}

.reduce {
  color: red;
  margin-right: 5px;
}

.shopType {
  color: red;
}

.shopIcon {
  font-size: 32px;
  margin-left: 10px;
}

.imgbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 400px;
}

.imgMask {
  position: absolute;
  left: 0;
  top: 0;
  width: 750px;
  height: 400px;
  /* margin-top: -400px; */
  background-color: rgba(0, 0, 0, 0.5);
  align-items: flex-end;
  justify-content: flex-end;
}
.fixeds {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scroller {
  position: fixed;
  top: 400px;
  left: 0;
  right: 0;
  bottom: 0;
}

.acenter {
  align-items: center;
}

.row {
  flex-direction: row;
}

.userName {
  color: #ffffff;
  font-size: 34px;
}
.tagoffice {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #e5b629;
  letter-spacing: 0;
}
.officeIcon {
  width: 24px;
  height: 24px;
  margin-left: 20px;
  margin-right: 10px;
}

.credit {
  color: #41eff2;
  margin-left: 20px;
}

.userInfo {
  width: 686px;
  height: 140px;
  flex-direction: row;
  padding: 20px 0;
  background-color: transparent;
  margin: 0 32px;
  margin-bottom: 30px;
  align-items: center;
  /* border-width: 1px; */
  /* 	border-style: solid;
		border-color: #E8E8E8;
		border-left-width: 0;
		border-right-width: 0; */
}

.userAvator {
  width: 94px;
  height: 94px;
  border-radius: 47px;
  background-color: #f2f2f2;
}

.userCenter {
  flex: 1;
  padding-right: 30px;
  padding-left: 20px;
  height: 80px;
  justify-content: space-between;
}

.row_title {
  color: #fff;
  font-size: 26px;
  margin-right: 15px;
}
</style>
